<template>
  <div class="brand-main">
    <el-card class="margin-30" shadow="never" :body-style="{ padding: '20px' }">
      <div slot="header">
        <el-button type="primary" size="mini" @click="getAddBrandList">新增</el-button>
      </div>

      <el-table :data="BrandPage" border stripe size="mini">
        <el-table-column
          prop="col.id"
          type="index"
          label="col.label"
          width="50"
          align="center"
        />
        <el-table-column
          prop="name"
          label="商品名称"
          width="130"
          align="center"
        />
        <el-table-column
          prop="showStatus"
          label="展示状态"
          width="150"
          align="center"
        >
          <template slot-scope="scope">
            <span>是否展示: &nbsp;&nbsp;</span>
            <!-- showStatus (integer, optional): 是否展示: 0-> 否 , 1-> 是 , -->
            <el-switch v-model="scope.row.showStatus" :active-value="1" :inactive-value="0" @change="getSwitchShow(scope.row.id,scope.row.showStatus)" />
          </template>
        </el-table-column>
        <el-table-column prop="logo" label="logo" width="150" align="center">
          <template slot-scope="scope">
            <el-image style="width: 60px; height: 60px; " :src="scope.row.logo" fit="fill" />
          </template>
        </el-table-column>
        <el-table-column prop="bigPic" label="专区大图" width="150" align="center">
          <template slot-scope="scope">
            <el-image style="width: 60px; height: 60px; " :src="scope.row.bigPic" fit="fill" />
          </template>
        </el-table-column>
        <el-table-column
          prop="brandStory"
          label="品牌故事"
          align="center"
        />
        <el-table-column
          prop="createTime"
          label="创建时间"
          width="130"
          align="center"
        />
        <el-table-column
          prop="sort"
          label="排序"
          width="130"
          align="center"
        />
        <el-table-column
          prop="productCommentCount"
          label="产品评论数量"
          width="130"
          align="center"
        />
        <el-table-column
          prop="factoryStatus"
          label="是否品牌制造商"
          width="130"
          align="center"
        />
        <el-table-column
          prop="createTime"
          label="操作"
          width="130"
          align="center"
        >
          <template slot-scope="scope">
            <el-button type="text" size="default" @click="getBrandEdit(scope.row)">编辑</el-button>
            <el-button style="color: #f00;" type="text" size="default" @click="getBrandDel(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <el-pagination
        style="margin-top: 30px; text-align: center;"
        :current-page="start"
        :page-sizes="[10, 20, 30]"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <el-dialog title="品牌详情" :visible.sync="dialogVisible" width="60%">
      <el-form ref="editBrandForm" :model="editBrandItem" label-width="150px" size="mini">
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <el-form-item label="品牌名称">
              <template>
                <el-select v-model="editBrandItem.name" style="width: 100%;" placeholder="请选择">
                  <el-option
                    v-for="item in BrandList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name"
                    :disabled="item.disabled"
                  />
                </el-select>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="首字母">
              <el-input v-model="editBrandItem.firstLetter" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <el-form-item label="排序">
              <el-input v-model="editBrandItem.sort" />
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="产品数量">
              <el-input v-model="editBrandItem.productCount" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="15" :offset="0">
            <el-form-item label="品牌故事">
              <el-input
                v-model="editBrandItem.brandStory"
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <el-form-item label="是否展示">
              <el-switch v-model="editBrandItem.showStatus" :active-value="1" :inactive-value="0" />
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="是否为品牌制造商">
              <el-switch v-model="editBrandItem.factoryStatus" :active-value="1" :inactive-value="0" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <el-form-item label="上传专区大图">
              <el-upload
                class="avatar-uploader"
                :action="uploadFileOss"
                :headers="token"
                :show-file-list="false"
                :on-success="handleBigPicSucc"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="editBrandItem.bigPic" :src="editBrandItem.bigPic" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="上传Logo">
              <el-upload
                class="avatar-uploader"
                :action="uploadFileOss"
                :headers="token"
                :show-file-list="false"
                :on-success="handleLogoSucc"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="editBrandItem.logo" :src="editBrandItem.logo" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="doCancelUpdate">取 消</el-button>
        <el-button type="primary" @click="getAffirmUpdate">{{ isAdd?'新增':'确 定' }}</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import mix from '@/mixins'
import { findBrandByPage, updateBrand, delBrand, switchShowStatus, addBrand } from '@/api/product/brand'

export default {
  name: 'Brand',
  mixins: [mix],
  data() {
    return {
      BrandPage: [],
      editBrandItem: {},
      dialogVisible: false,
      isAdd: false
    }
  },

  mounted() {
    this.getBrandList()
    this.getBrandListPage()
  },

  methods: {
    // 编辑品牌
    getBrandEdit(details) {
      this.dialogVisible = true
      this.isAdd = false
      this.editBrandItem = details
    },
    // 上传专区大图
    handleBigPicSucc(res) {
      const { data: { fileUrl }} = res
      // this.editBrandItem.bigPic = fileUrl
      this.$set(this.editBrandItem, 'bigPic', fileUrl)
    },
    // logo
    handleLogoSucc(res) {
      const { data: { fileUrl }} = res
      // this.editBrandItem.logo = fileUrl
      this.$set(this.editBrandItem, 'logo', fileUrl)
    },
    // 新增列表
    getAddBrandList() {
      this.dialogVisible = true
      this.isAdd = true
    },
    // 更新 / 新增
    async getAffirmUpdate() {
      let api
      if (this.isAdd) {
        api = addBrand
      } else {
        api = updateBrand
        // 从商品列表里获取商品名
        this.BrandList.forEach(item => {
          if (item.name === this.editBrandItem.name) {
            this.editBrandItem.id = item.id
          }
        })
      }
      const res = await api(this.editBrandItem)
      const { success } = res
      if (success) {
        this.dialogVisible = false
        this.editBrandItem = {}
        if (this.isAdd) {
          this.$notify({
            title: '成功',
            message: '新增成功',
            type: 'success'
          })
        } else {
          this.$notify({
            title: '成功',
            message: '编辑成功',
            type: 'success'
          })
        }
      }
    },
    // 取消
    doCancelUpdate() {
      this.dialogVisible = false
      this.editBrandItem = {}
    },

    // 是否展示
    async getSwitchShow(id, status) {
      const res = await switchShowStatus({ id, status })
      const { success } = res
      if (success) {
        if (status === 0) {
          this.$notify.info({
            title: '是否展示',
            message: '已取消展示'
          })
        } else {
          this.$notify({
            title: '是否展示',
            message: '商品已展示',
            type: 'success'
          })
        }
      }
    },

    // 删除品牌
    getBrandDel(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const res = await delBrand(id)
        const { success } = res
        if (success) {
          this.getBrandListPage()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        } else {
          this.$message.waring('删除失败')
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    // 品牌列表
    async getBrandListPage() {
      const res = await findBrandByPage(this.start, this.limit)
      console.log(res)
      const { success, data: { rows, total }} = res
      if (success) {
        this.BrandPage = rows
        this.total = total
      } else {
        this.$message.waring('获取失败,请刷新重试')
      }
    },
    // 分页
    handleSizeChange(val) {
      this.limit = val
      this.start = 1
      this.getBrandListPage()
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.start = val
      this.getBrandListPage()
      // console.log(`当前页: ${val}`);
    }
  }
}
</script>

<style lang="scss" scoped>
.brand-main{
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
</style>
